<template>
  <div class="overview-container">
    <v-layout wrap justify-space-between align-center>
      <v-flex class="card blue--text">
        <h1 class="headline">充值</h1>
      </v-flex>
      <v-flex class="card blue--text">
        <h1 class="headline">测评</h1>
      </v-flex>
      <v-flex class="card blue--text">
        <h1 class="headline">任务跟踪</h1>
      </v-flex>

      <v-flex class="card elevation-2">
        <h2 class="headline">全部任务</h2>
        <div class="title">{{ overview.all }}</div>
      </v-flex>
      <v-flex class="card elevation-2">
        <h2 class="headline">待支付</h2>
        <div class="title">{{ overview.all }}</div>
      </v-flex>
      <v-flex class="card elevation-2">
        <h2 class="headline">待支付</h2>
        <div class="title">{{ overview.all }}</div>
      </v-flex>

      <v-flex class="card elevation-2">
        <h2 class="headline">已预约</h2>
        <div class="title">{{ overview.all }}</div>
      </v-flex>
      <v-flex class="card elevation-2">
        <h2 class="headline">待确认订单</h2>
        <div class="title">{{ overview.all }}</div>
      </v-flex>
      <v-flex class="card elevation-2">
        <h2 class="headline">待上传评价</h2>
        <div class="title">{{ overview.all }}</div>
      </v-flex>
      
      <v-flex class="card elevation-2">
        <h2 class="headline">待确认评价</h2>
        <div class="title">{{ overview.all }}</div>
      </v-flex>
      <v-flex class="card elevation-2">
        <h2 class="headline">完成</h2>
        <div class="title">{{ overview.all }}</div>
      </v-flex>
      <v-flex class="card elevation-2">
        <h2 class="headline">已下架</h2>
        <div class="title">{{ overview.all }}</div>
      </v-flex>

    </v-layout>
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Task } from "@/api";
import { KV } from '@/utils/type';
import { PageOptions } from '@/utils/constants';
import { forEach } from "lodash";
declare const $Vue: Vue;

@Component
export default class Overview extends Vue {

  private overview: any = {
    all: 1,
  }

  protected mounted() {
}
  /**
   * 修改任务状态
   */
  private async modifyTask() {
    const params = {};
    // const { data } = await Task.modifyTask.r(params);
    // console.log("modifyTask", data);
    // if (data.result === 0) {
    // } else {
    // }
  }
}
</script>

<style lang="less" scoped>
.overview-container {
  width: 100%;
  height: 100%;
  padding: 2% 10%;
  box-sizing: border-box;
  .card {
    height: 8rem;
    border-radius: 8px;
        display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-basis: 30%;
    max-width: 30%;
    width: 30%;
    margin-bottom: 2rem;
    h2 {
      margin-bottom: 1.6rem;
    }
  }
}
</style>


